<template>
	<view class="historyLayout">
		<scroll-view :style="'top:'+getNavBarHeight()+'px'" class="dateList" :scroll-x="true"
			:scroll-with-animation="true" scroll-into-view="scorll-1" enable-flex>
			<view class="date" id="scorll-0">2024年02月</view>
			<view class="date" id="scorll-1">2024年03月</view>
			<view class="date active" id="scorll-2">2024年04月</view>
			<view class="date" id="scorll-3">2024年05月</view>
		</scroll-view>
		
		<view class="budget" :style="'top:'+ (getNavBarHeight() + 40) +'px'">
			<view class="top">
				<view>预算概况</view>
				<view><text>¥992.62</text>已支出</view>
			</view>
			<view class="bottom">
				<view>平均支出 ¥112.00/天</view>
				<view>总预算 <text>¥3000</text></view>
			</view>
		</view>

		<view class="content">
			<uni-collapse class="payHistory">
				<uni-collapse-item open title="支付历史" border>
					<view class="content">
						<view class="list">
							<view class="day">
								<view class="date">
									2024-04-29
								</view>
								<view class="amount">
									-¥256.34
								</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="education" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="health" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="education" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>


			<uni-collapse class="payHistory">
				<uni-collapse-item open title="支付历史" border>
					<view class="content">
						<view class="list">
							<view class="day">
								<view class="date">
									2024-04-29
								</view>
								<view class="amount">
									-¥256.34
								</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="education" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="health" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="education" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>


			<uni-collapse class="payHistory">
				<uni-collapse-item open title="支付历史" border>
					<view class="content">
						<view class="list">
							<view class="day">
								<view class="date">
									2024-04-29
								</view>
								<view class="amount">
									-¥256.34
								</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="education" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="health" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
							<view class="detail">
								<type-icon class="icon" type="education" :white="true"></type-icon>
								<view class="describe">
									<view class="title">消费标题</view>
									<view class="text">消费内容123123123</view>
								</view>
								<view class="amount">-¥23.50</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script setup>
	import {
		getNavBarHeight
	} from '@/utils/system.js'
</script>

<style lang="scss" scoped>
	.historyLayout {
		background: #f9f9ff;
		min-height: 100vh;

		.dateList {
			position: fixed;
			left: 0;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			background: #fff;
			z-index: 2;

			.date {
				display: inline-block;
				width: 33.33%;
				text-align: center;
				line-height: 60rpx;
				font-size: 24rpx;
				letter-spacing: 0px;
				line-height: 28px;
				color: #606060;
				text-align: center;
				vertical-align: top;
			}

			.active {
				color: rgba(49, 209, 158, 1);
				font-weight: 600;
				font-size: 26rpx;

				&::before {
					content: '· ';
				}
			}

		}
		
		.budget {
			position: fixed;
			left: 32rpx;
			width: 686rpx;
			z-index: 2;
			height: 120rpx;
			padding: 24rpx 32rpx;
			border-radius: 5px;
			background: linear-gradient(223.72deg, rgba(150, 239, 166, 1) 0%, rgba(38, 166, 181, 1) 100%);
			box-shadow: 0px 4px 14px -4px rgba(195, 234, 217, 1);
			color: white;
		
			.top {
				height: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				& view:first-child {
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
		
				& view:last-child {
					font-size: 20rpx;
					letter-spacing: 2rpx;
		
					text {
						font-size: 32rpx;
						margin-right: 5rpx;
					}
				}
			}
		
			.bottom {
				margin-top: 18rpx;
				height: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				& view:first-child {
					font-size: 20rpx;
					letter-spacing: 2rpx;
				}
		
				& view:last-child {
					font-size: 20rpx;
					letter-spacing: 2rpx;
		
					text {
						font-size: 26rpx;
						margin-right: 5rpx;
					}
				}
			}
		}
		
		.content {
			padding: 190rpx 32rpx;

			.payHistory {
				background: white;
				border-radius: 5rpx;
				box-shadow: 0px 4px 16px rgba(239, 245, 255, 1);
				margin-top: 32rpx;

				.content {
					padding: 40rpx 0;
					margin: 6rpx 32rpx;
					border-top: 2rpx dotted #CCCCCC;

					.list {
						margin-top: 0rpx;

						.day {
							height: 32rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 28rpx;
							font-weight: 600;
							margin-bottom: 40rpx;
						}

						.detail {
							margin-bottom: 32rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 64rpx;

							.icon {
								width: 64rpx;
								height: 64rpx;
							}

							.describe {
								flex: 1;
								padding-left: 24rpx;

								.title {
									color: #1C1C1C;
									font-size: 24rpx;
									font-weight: 600;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.text {
									color: #8A8A8A;
									font-size: 24rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							.amount {
								font-size: 28rpx;
								font-weight: 600;
							}
						}
					}

				}

			}
		}
	}
</style>